import { VC, Component } from '@/VC-vue'
import './index.styl'
import icon1 from '../../assets/img/icon_1.png'
import icon2 from '../../assets/img/icon_2.png'
import icon3 from '../../assets/img/icon_3.png'
import icon4 from '../../assets/img/icon_4.png'
import icon5 from '../../assets/img/icon_5.png'
import icon6 from '../../assets/img/icon6.png'
import icon7 from '../../assets/img/icon7.png'
import icon8 from '../../assets/img/icon8.png'
import icon9 from '../../assets/img/icon9.png'
import icon10 from '../../assets/img/icon10.png'
import banner from '../../assets/banner.png'

@Component({})
export default class Index extends VC {
    imgList: any[] = [banner, banner]

    renderCard() {
        return (
            <div class="card-con">
                <div
                    class="list-card is-flex"
                    onclick={this.navigateTo.bind(this, '/create')}
                >
                    <div class="left">
                        <div class="is-flex icon">
                            <img src={icon1} alt="" />
                        </div>
                    </div>
                    <div class="right">
                        <div class="title">发起质控</div>
                        <div class="desc">指定质控规则和对象发起质控</div>
                    </div>
                </div>
                <div
                    class="list-card is-flex"
                    onclick={this.navigateTo.bind(this, '/search')}
                >
                    <div class="left">
                        <div class="is-flex icon">
                            <img src={icon2} alt="" />
                        </div>
                    </div>
                    <div class="right">
                        <div class="title">查询质控任务</div>
                        <div class="desc">查询历史质控任务</div>
                    </div>
                </div>
                <div
                    class="list-card is-flex"
                    onclick={this.navigateTo.bind(this, '/result')}
                >
                    <div class="left">
                        <div class="is-flex icon">
                            <img src={icon3} alt="" />
                        </div>
                    </div>
                    <div class="right">
                        <div class="title">质控结果查询</div>
                        <div class="desc">查询历史质控结果</div>
                    </div>
                </div>
                <div
                    class="list-card is-flex"
                    onclick={this.navigateTo.bind(this, '/task-statistic')}
                >
                    <div class="left">
                        <div class="is-flex icon">
                            <img src={icon4} alt="" />
                        </div>
                    </div>
                    <div class="right">
                        <div class="title">任务报表</div>
                        <div class="desc">统计质控任务发起情况</div>
                    </div>
                </div>
                <div
                    class="list-card is-flex"
                    onclick={this.navigateTo.bind(this, '/result-statistic')}
                >
                    <div class="left">
                        <div class="is-flex icon">
                            <img src={icon5} alt="" />
                        </div>
                    </div>
                    <div class="right">
                        <div class="title">质控结果报表</div>
                        <div class="desc">统计异常质控数据</div>
                    </div>
                </div>
            </div>
        )
    }

    renderIcon() {
        return (
            <div class="icon_main">
                <div
                    class="icon_item"
                    onclick={this.navigateTo.bind(this, '/create')}
                >
                    <img src={icon6} class="icon_img" />
                    <div class="icon_title">发起质控</div>
                </div>
                <div
                    class="icon_item"
                    onclick={this.navigateTo.bind(this, '/search')}
                >
                    <img src={icon10} class="icon_img" />
                    <div class="icon_title">查询质控任务</div>
                </div>
                <div
                    class="icon_item"
                    onclick={this.navigateTo.bind(this, '/result')}
                >
                    <img src={icon8} class="icon_img" />
                    <div class="icon_title">质控结果查询</div>
                </div>
                <div
                    class="icon_item"
                    onclick={this.navigateTo.bind(this, '/task-statistic')}
                >
                    <img src={icon7} class="icon_img" />
                    <div class="icon_title">任务报表</div>
                </div>
                <div
                    class="icon_item"
                    onclick={this.navigateTo.bind(this, '/result-statistic')}
                >
                    <img src={icon9} class="icon_img" />
                    <div class="icon_title">任务结果报表</div>
                </div>
            </div>
        )
    }

    renderSwiper() {
        return (
            <div class="swiper_main">
                <md-swiper
                    ref="swiper"
                    is-prevent={false}
                    useNative-driver={false}
                >
                    {this.imgList.map(item => {
                        return (
                            <md-swiper-item>
                                <img src={item} class="banner-item" />
                            </md-swiper-item>
                        )
                    })}
                </md-swiper>
            </div>
        )
    }

    navigateTo(path: string) {
        this.$router.push({
            path
        })
    }

    render() {
        return (
            <div class="container">
                {this.renderSwiper()}
                {this.renderIcon()}
            </div>
        )
    }
}
